// packageG/mycomponent/mapMarker/mapMarker.js
const app = getApp();
Component({
  properties: {
    datas: {
      type: null,
    },
    component_id: {
      type: null,
    },
  },
  // 私有数据，可用于模板渲染
  data: {
    clientWidth: "375",
    markers: [],
    includePoints:[],
    showCustomCallout: false,

    tabArr: [],
    activeTab: 0
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() {},
    moved() {},
    detached() {},
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() {},
  // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() {
    this.data.markers = [];
    let markers = this.transformArr(this.data.datas.list)
    this.setData({
      clientWidth: wx.getSystemInfoSync().windowWidth,
      centerLng: markers[0]?.longitude||116.397428,
      centerLat: markers[0]?.latitude||39.90923,
      markers: markers,
      tabArr: this.data.tabArr
    });
    setTimeout(() => {
      this.setData({
        includePoints: this.data.tabArr[0].points
      });
    }, 1200);
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() {},
    hide() {},
    resize() {},
  },
  methods: {
    // 将数组arr中的数据转换为指定格式
  transformArr(arr) {
    // 创建一个新的数组来存储转换后的数据
    const newArr = [];
    let activeTabArr = {};
    let tabArr = [];
    // 遍历arr中的每个元素
    for (let i = 0; i < arr.length; i++) {
      // 获取当前元素
      const item = arr[i];
      activeTabArr = {
        id: i,
        name: item.name,
        iconPath: item.iconPath,
        points: [{
          latitude: item.datas[0].latitude,
          longitude: item.datas[0].longitude,
        }]
      };

      // 将当前元素的id、iconPath、name和latitude添加到新的数组中
      newArr.push({
        id: Number(item.id.toString() + i.toString()),
        iconPath: item.iconPath || 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        width: 20,
        height: 30,
        name: item.name,
        latitude: item.datas[0].latitude,
        longitude: item.datas[0].longitude,
        callout: {
          display: 'ALWAYS',
          padding: "10rpx",
          borderRadius: "5rpx",
          content: item.datas[0].title,
          text: item.datas[0].content,
          link: item.datas[0].link
        }
      });

      // 将当前元素的datas数组中的其他元素添加到新的数组中
      for (let j = 1; j < item.datas.length; j++) {
        newArr.push({
          id: Number(item.id.toString() + i.toString() + j.toString()),
          iconPath: item.iconPath || 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          width: 20,
          height: 30,
          name: item.name,
          latitude: item.datas[j].latitude,
          longitude: item.datas[j].longitude,
          callout: {
            display: 'ALWAYS',
            padding: "10rpx",
            borderRadius: "5rpx",
            content: item.datas[j].title,
            text: item.datas[j].content,
            link: item.datas[j].link
          },
        });
        activeTabArr.points.push({
          latitude: item.datas[j].latitude,
          longitude: item.datas[j].longitude,
        })
      }
      tabArr.push(activeTabArr)
    }
    this.data.tabArr = tabArr;
    // 返回新的数组
    return newArr;
    },
    bindtap(){
      this.setData({
        showCustomCallout: false,
      })
    },
    bindmarkertap(e) {
      let _clickId = e.detail.markerId;
      this.data.markers.forEach((e,index)=>{
        if(e.id == _clickId) {
          this.setData({
            customCalloutInfo: e,
            includePoints: [{
              latitude: e.latitude,
              longitude: e.longitude,
            }]
          })
          setTimeout(() => {
            this.setData({
              showCustomCallout: true
            })
          }, 250);
        }
      });
    },
    catchTap(e){
      let points = e.currentTarget.dataset.points || [];
      let index = e.currentTarget.dataset.index;
      this.setData({
        includePoints: points,
        activeTab: index,
        showCustomCallout: false
      });
    },
    addressButton() {
      let latitude = Number(this.data.customCalloutInfo.latitude);
      let longitude = Number(this.data.customCalloutInfo.longitude);
      let store_name = this.data.customCalloutInfo.callout.content;
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        scale: 16,
        name: store_name,
      });
    },
    toPage(){
      wx.navigateTo({
        url: this.data.customCalloutInfo.callout.link,
        fail: ()=>{
          wx.switchTab({
            url: this.data.customCalloutInfo.callout.link,
            fail: ()=>{
              wx.showToast({
                title: '请检查路径',
                icon: 'error',
                duration: 2000
              })
            }
          })
        }
      });
    }
  },
});
